<template>
    <div>
        <el-dialog
            :title.sync="title"
            :visible.sync="dialogFormVisible"
            width="80%"
        >
            <el-form
                :model="form"
                class="demo-form-inline"
                label-width="240px"
                ref="formRef"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="获票人名称："
                            prop="hprmc"
                            :rules="[
                                {
                                    required: true,
                                    message: '获票人名称不能为空',
                                    trigger: 'blur',
                                },
                            ]"
                        >
                            <el-input
                                v-model="form.hprmc"
                                type="text"
                                maxlength="128"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-col>
                  <el-col :span="12">
                    <el-form-item
                        label="开票人纳税人识别号："
                        prop="kprnsrsbh"
                        :rules="[
                                {
                                    pattern: /^[A-Z0-9]+$/,
                                    message: '只能输入数字或大写字母',
                                    trigger: 'blur',
                                },
                            ]"
                    >
                      <el-input
                          v-model="form.kprnsrsbh"
                          maxlength="20"
                          show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                        label="购买方银行账号："
                        prop="gmfyhzh"
                        :rules="[
                                {
                                    pattern: /^[0-9]+$/,
                                    message: '只能输入数字',
                                    trigger: 'blur',
                                },
                            ]"
                    >
                      <el-input
                          v-model="form.gmfyhzh"
                          maxlength="100"
                          show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="购买方电话："
                            prop="gmfdh"
                            :rules="[
                                {
                                    message: '请输入正确电话号码',
                                    trigger: 'blur',
                                },
                            ]"
                        >
                            <el-input
                                v-model="form.gmfdh"
                                maxlength="60"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="购买方地址：">
                            <el-input
                                v-model="form.gmfdz"
                                maxlength="300"
                                show-word-limit
                                style="width: 100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="购买方开户行：">
                            <el-input
                                v-model="form.gmfkhh"
                                maxlength="120"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="saveUpdateSubmit">
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { throttle } from 'lodash'
import { detail, saveUpdate } from '@/api/custom.js'
import { saveOrSubmit } from '@/api/businessFlow'

export default {
    name: 'custom-saveUpdate',
    data() {
        return {
            dialogFormVisible: false,
            form: {
                hprmc: '',
                kprnsrsbh: '',
                gmfdh: '',
                gmfdz: '',
                gmfkhh: '',
                gmfyhzh: '',
            },
            title: '新增客户基本信息',
            id: null,
        }
    },
    methods: {
        closeDialog() {
            this.dialogFormVisible = false
            this.$refs.formRef.resetFields()
        },
        async initInfo(id) {
            this.loading = true
            this.id = id
            if (this.id) {
                let { data, code, message } = await detail({ id: this.id })
                if (code == 200) {
                    this.form = data
                } else {
                    // this.$message({
                    //     type: 'success',
                    //     message: message,
                    // })
                }
            }
            this.loading = false
        },
        saveUpdateSubmit: throttle(async function (params) {
            this.$refs.formRef.validate(async (valid) => {
                if (!valid) {
                    return
                } else {
                    this.loading = true

                    let { data, code, message } = await saveUpdate({
                        id: this.id,
                        hprmc: this.form.hprmc,
                        kprnsrsbh: this.form.kprnsrsbh,
                        gmfdh: this.form.gmfdh,
                        gmfdz: this.form.gmfdz,
                        gmfkhh: this.form.gmfkhh,
                        gmfyhzh: this.form.gmfyhzh,
                    })

                    if (code == 200) {
                        this.dialogFormVisible = false
                        this.clearInfo()
                        this.$message({
                            type: 'success',
                            message: message,
                        })
                        this.$parent.getList()
                    }
                    this.loading = false
                }
            })
        }, 0),

        // 清空输入框信息
        clearInfo() {
            this.form.hprmc = ''
            this.form.kprnsrsbh = ''
            this.form.gmfdh = ''
            this.form.gmfdz = ''
            this.form.gmfkhh = ''
            this.form.gmfyhzh = ''
        },
    },
}
</script>
<style scoped>
</style>